<template>
  <div class="basic">
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">
          <i class="el-icon-s-home"></i>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-bank-card"></i>
          优惠管理
        </el-breadcrumb-item>
        <!-- 当前 -->
        <el-breadcrumb-item>基本功能</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <ul style="list-style: none;overflow: hidden;">
        <li :class="i==index?'li-item':'li-item2'" @click="header(item,index)" v-for="(item, index) in list1">{{ item.label }}</li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list1: [{label:'满额立减',value:'lijian'},{label: '满额包邮',value:'baoyou'}, {label:'充值满送',value:'chongzhi'}],
      i:0
    }
  },
  methods: {
    header(item,index){
      this.i=index
      this.$router.push(item.value)
    }
  }
}
</script>
<style scoped>
.basic {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 95%;
  height: 50px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100%;
}

.li-item {
  line-height: 25px;
  background-color: #FF9800;
  padding: 5px 10px;
  color: #fff;
  border-radius: 10px;
  margin-left: 10px;
  font-weight: bold;
}
.li-item2 {
  line-height: 25px;
  padding: 5px 10px;
  color: black;
  border-radius: 10px;
  margin-left: 10px;
  font-weight: bold;
}
.content{
  width:100%;
  /* padding: 20px 0;
  background-color: #F5F7F9; */
  margin-top: 30px;
}
</style>